<template>
    <div>
        <el-form :inline="true" :model="formInline" label-width="auto" class="demo-form-inline">
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="交易时间">
                        <el-date-picker v-model="formInline.dateRange" type="datetimerange" start-placeholder="Start date and time" end-placeholder="End date and time" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="交易类型">
                        <el-select v-model="formInline.transactionType" placeholder="请选择交易类型" clearable>
                            <el-option v-for="item in transactionTypes" :key="item.value" :label="item.label" :value="item.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="交易对象">
                        <el-input v-model="formInline.transactionObject" placeholder="请输入交易对象" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="商品说明">
                        <el-input v-model="formInline.description" placeholder="请输入商品说明" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="交易金额">
                        <el-input-number v-model="formInline.minNum" @change="accountChange" />
                        <span class="separator">-</span>
                        <el-input-number v-model="formInline.maxNum" @change="accountChange" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="备注">
                        <el-input v-model="formInline.remake" placeholder="请输入备注" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="24" class="submit">
                    <el-form-item>
                        <el-button type="primary" @click="onReset">重置</el-button>
                        <el-button type="primary" @click="onSubmit">查询</el-button>
                        <el-button type="primary" @click="filtration">过滤忽略</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import { transactionTypes } from "@/constant/constant";

const emit = defineEmits(["getParamsData"]);
let savedParams: any = ref({});

const formInline = reactive({
    dateRange: [], // 数组类型用于存储开始时间和结束时间
    transactionObject: "",
    transactionType: "",
    description: "",
    minNum: null,
    maxNum: null,
    remake: "",
});

const onSubmit = () => {
    const params: any = {
        ...formInline,
        startTime: new Date(formInline.dateRange[0]).getTime(), // 转换为时间戳
        endTime: new Date(formInline.dateRange[1]).getTime(), // 同样处理 endTime
    };
    delete params.dateRange;
    savedParams.value = params;
    emit("getParamsData", params);
};

// 重置表单字段为初始状态
const onReset = () => {
    formInline.dateRange = [];
    formInline.transactionObject = "";
    formInline.transactionType = "";
    formInline.description = "";
    formInline.minNum = null;
    formInline.maxNum = null;
    formInline.remake = "";
    delete savedParams.value.ignoreFlag;
};

const filtration = () => {
    const params: any = {
        ignoreFlag: 1,
        ...savedParams.value,
    };
    emit("getParamsData", params);
};

const accountChange = (value: number) => {
    console.log(value);
};
</script>

<style scoped>
.submit {
    text-align: right;
}
.demo-form-inline .el-select {
    --el-select-width: 220px;
}
.demo-form-inline .el-input-number {
    width: 120px;
}
.separator {
    margin: 0 20px;
    font-size: 16px;
}
</style>
